<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="" />
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/slider.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/mb/css/normalize.css}" />
    <link rel="stylesheet" th:href="@{/mb/css/style-button.css}">
    <link rel="stylesheet" th:href="@{/mb/css/layer.css}">
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}"  media="all">
    <title>注册管理员</title>

    <style>
        .name span{
            color: red;}
        .try_content{
            width: 900px;
        }
    </style>
</head>

<body>
<!--注册使用样式-->
<div class="container">
    <div class="mtb50 Register_style">
        <div class="tryout_style clearfix">
            <form class="try_content" th:action="@{/addAdmin}" method="post" >

                <div class="name">
                    <label class="label_name">姓名:</label>
                    <input style="" id="name" name="name" type="text" class="text width500" onblur="realname()" placeholder="请输入您的真实姓名" value="" ><span id="error-name2"></span>
                </div>

                <div class="name">
                    <label class="label_name">性别:</label>
                    <div style="line-height: 42px;width: 100%;height: 20px;">
                        <input type="radio" class="blue" name="userSex" id="" value="1" checked="checked"/>男
                        <input type="radio" class="blue" name="userSex" id="Type" value="2" />女
                    </div>
                </div>

                <div class="name">
                    <label class="label_name">年龄:</label>
                    <input style="" id="age" name="age" type="number"  class="text add_qq" onblur="userage()" placeholder="请输入您的年龄" value="" ></span>
                </div>

                <div class="name">
                    <label class="label_name">账号:</label>
                    <input style="" id="username" name="username" type="text"  class="text add_qq" onblur="username()" placeholder="请输入您的账号" value="" ><span id="error-username"></span>
                </div>

                <div class="name">
                    <label class="label_name">部门:</label>
                    <div style="line-height: 42px;width: 100%;height: 20px;">
                        <input type="radio" class="blue" name="userDep" value="1" checked="checked"/>总经理办公室
                        <input type="radio" class="blue" name="userDep" value="2" />人力资源部
                        <input type="radio" class="blue" name="userDep" value="3" />财务部
                        <input type="radio" class="blue" name="userDep" value="4" />生产技术部
                        <input type="radio" class="blue" name="userDep" value="5" />计划营销部
                        <input type="radio" class="blue" name="userDep" value="6" />安全监察部
                        <input type="radio" class="blue" name="userDep" value="7" />后勤部
                    </div>
                </div>

                <div class="name">
                    <label class="label_name">密码:</label>
                    <input style="" id="password" name="password" type="password"  class="text width500" onblur="password()" oninput="password()" placeholder="密码不得小于6位且区分大小写" value="" ><span id="error-pwd"></span>
                </div>

                <div class="name">
                    <label class="label_name">确认密码:</label>
                    <input style="" id="password2" name="password2" type="password" class="text width500" onblur="checkPwd()" oninput="checkPwd()"  placeholder="请再次输入密码" value="" ><span id="error-checkPwd"></span>
                </div>

                <div class="name">
                    <label class="label_name">&nbsp;联系方式:</label>
                    <input style="" id="tel" name="userTel" class="text width500" oninput="checkTel()" th:placeholder="请输入您的联系方式" type="" placeholder="" value="" ><span id="error-userTel"></span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                </div>

                <div class="name clearfix">
                    <button id="submit" class="layui-btn layui-btn-normal" type="submit"
                             style="margin-left: 350px;width: 80px" onclick="exit()">添加</button>
                    <button type="button" class="layui-btn layui-btn-normal" onclick="exit()" style="width: 80px;">返回</button>
                </div>
            </form>
        </div>

    </div>
</div>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/common.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/slider.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/html5.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/layer.js}"></script>
<script th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>

<script type="text/javascript">

    function userage() {
        var userage=document.getElementById("age").value;
        var error=document.getElementById("error-userage");
        if(userage !="" && userage !=null){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="请输入您的年龄!";
        return false;
    }

    function username() {
        var username=document.getElementById("username").value;
        var error=document.getElementById("error-username");
        if(username !="" && username !=null){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="请输入您的账号!";
        return false;
    }

    function realname() {
        var realname=document.getElementById("name").value;
        var error=document.getElementById("error-name2");
        if(realname!="" && realname !=null){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="请输入您的姓名!";
        return false;
    }

    function password() {
        var password1=document.getElementById("password").value;
        var error=document.getElementById("error-pwd");
        if(password1.length>=6){
            error.innerHTML="";
            return true;
        }
        error.innerHTML="密码强度不得小于6位!";
        return false;
    }

    function checkPwd() {
        var password1=document.getElementById("password").value;
        var password2=document.getElementById("password2").value;
        var error1=document.getElementById("error-pwd");
        var error2=document.getElementById("error-checkPwd");
        if(password1 != "" && password1 != null) {
            if (password2 != "" && password2 != null) {
                if (password1 == password2) {
                    error2.innerHTML = "";
                    return true;
                }
                error2.innerHTML = "两次密码不相同!";
                return false;
            }
        }
        error1.innerHTML = "请输入密码!";
        return false;
    }

    function checkTel() {
        var tel=document.getElementById("userTel").value;
        var error=document.getElementById("error-userTel");
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (tel!="" && tel!=null){
            if (reg.test(tel) == true) {
                error.innerHTML="";
                return true;
            }
            error.innerHTML="手机号错误!请重试!";
            return false;

        }
        error.innerHTML="请输入手机号!";
        return false;
    }

    function exit() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>



</div>






</body>
</html>
